<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <link href="{{url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
  <title>车票购买系统</title>
  <style>
    .my-h1 {
        margin-bottom: 1rem!important;
		margin-top: 2rem!important;
        text-align: center;
        width: 100%;
        font-size: 52px;
    }
  </style>
</head>
<body class="bg-light">
    <div class="container">
        <h1 class="my-h1">付款</h1>
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card bg-light">
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="row mb-3 fs-4">
                                <div class="col-md-2">
                                    <p>车次：</p>
                                </div>
                                <div class="col">
                                    <pre style="white-space: pre-wrap; font-size: 24px;">{{ ticket_info[0] }}</pre>
                                </div>
                            </div>
                            <div class="row mb-3 fs-4">
                                <p>日期：{{ ticket_info[1] }}</p>
                            </div>
                            <div class="row mb-3 fs-4">
                                <p>乘车人：{{ ticket_info[2] }}</p>
                            </div>
                            <div class="row mb-3 fs-4">
                                <p>座位号：{{ ticket_info[3] }}</p>
                            </div>
                            <div class="row mb-3 fs-4">
                                <p>金额：{{ ticket_info[4] }}元</p>
                            </div>
                            <form action="/payment" method="post" onsubmit="return validateForm()">
                                <div class="row mb-3 fs-4">
                                    <div class="col-md-4">
                                        <label for="seat" class="form-label">支付方式：</label>
                                    </div>
                                    <div class="col">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment" id="wechat" value="微信">
                                            <label class="form-check-label" for="seat1">微信</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment" id="alipay" value="支付宝">
                                            <label class="form-check-label" for="seat2">支付宝</label>
                                        </div>
                                    </div>                           
                                </div>
                                <input type="hidden" name="ticket_info" value="{{ ticket_info }}">
                                <div class="row justify-content-center">
                                    <div class="col-auto">
                                        <input type="submit" value="确认付款" class="btn btn-primary">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    <script>
        function validateForm() {
            var payment = document.querySelector('input[name="payment"]:checked');

            if (!payment) {
                alert("请选择支付方式");
                return false;
            }
        }
    </script>
</body>
</html>